<template>
  <div>
    <!-- 筛选组件 -->
    <template>
      <div class="cont-top-box">
        <el-form label-width="100px">
          <el-form-item label="部门">
            <el-checkbox-group v-model="depsList" style="display:inline-block">
              <el-checkbox v-for="item in depList" :key="item.id" :label="item.id" @change="checkChange">{{ item.name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="考勤状况">
            <el-radio-group v-model="addenBuff" style="display:inline-block">
              <el-radio v-for="item in addenList" :key="item.id" :label="item.id" @change="checkChange">{{ item.value }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
    </template>
  </div>
</template>

<script>
import { getDepartments } from '@/api/departments'
import attendanceConstant from '@/api/constant/attendance'
export default {
  data() {
    return {
      depList: [],
      depsList: [],
      addenList: [],
      addenBuff: ''
    }
  },
  async created() {
    const { depts } = await getDepartments()
    this.depList = depts
    this.addenList = attendanceConstant.holidayType
  },
  methods: {
    checkChange() {
      this.$emit('checkChange')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.cont-top-box {
  padding: 20px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

</style>
